<template>
  <div class="signup_index">
    <div class="content inner">
      <steps :step="2" :revise="isEditInfos" :editTitle="editTitle"></steps>
      <div class="reporting-main module">
        <div class="hd">
          <div class="alert-title">
            【入学类型：<span>{{ alertTitle }}</span
            >】 如果入学类型错误，请注销账号后重新注册报名
          </div>
        </div>
        <div class="bd">
          <div class="notice">
            <el-button
              style="z-index: 9"
              size="mini"
              @click="isShowExample = !isShowExample"
              >示例图</el-button
            >
            <p class="notice-text">
              <span>上传资料须知：</span
              >可点击查看原图，上传时请注意图片方向，保持正常观看，注意保证图片清晰完整，保存成功后图片会显示在页面中；上传失败请点击图片重新上传
            </p>
            <!-- 示例图 -->
            <transition>
              <div v-if="isShowExample" class="example-wrap">
                <div class="example-content">
                  <ul>
                    <li>
                      <div class="content-img">
                        <span>完整清晰的图</span>
                        <el-image
                          :src="require('../assets/images/example01.png')"
                          fit="cover"
                        ></el-image>
                      </div>
                      <img
                        class="icon_dx"
                        :src="require('../assets/images/pic_d.png')"
                        alt=""
                      />
                    </li>
                    <li>
                      <div class="content-img">
                        <span>不完整的图</span>
                        <el-image
                          :src="require('../assets/images/example02.png')"
                          fit="cover"
                        ></el-image>
                      </div>
                      <img
                        class="icon_dx"
                        :src="require('../assets/images/pic_x.png')"
                        alt=""
                      />
                    </li>
                    <li>
                      <div class="content-img">
                        <span>不清晰的图</span>
                        <el-image
                          :src="require('../assets/images/example03.png')"
                          fit="cover"
                        ></el-image>
                      </div>
                      <img
                        class="icon_dx"
                        :src="require('../assets/images/pic_x.png')"
                        alt=""
                      />
                    </li>
                    <li>
                      <div class="content-img">
                        <span>干扰信息太多</span>
                        <el-image
                          :src="require('../assets/images/example04.png')"
                          fit="cover"
                        ></el-image>
                      </div>
                      <img
                        class="icon_dx"
                        :src="require('../assets/images/pic_x.png')"
                        alt=""
                      />
                    </li>
                  </ul>
                  <el-button
                    type="primary"
                    class="know"
                    @click="isShowExample = false"
                    >知道了</el-button
                  >
                </div>
              </div>
            </transition>
          </div>
          <div class="upload-data fn-clearfix">
            <div
              class="upload-list"
              v-for="item in signInfo"
              :key="item.imgType"
            >
              <div class="list-hd">
                <h3 class="title">
                  {{ item.imgTitle
                  }}<i v-if="item.isRequired == '1'">（必填）</i>
                  <span :class="{ left: item.isRequired == '0' }"
                    >{{ item.imgIntro }}，最多 {{ item.maxNum }} 页</span
                  >
                </h3>
              </div>
              <div class="list-bd">
                <div class="uploadImgBox">
                  <el-upload
                    class="avatar-uploader"
                    :class="{
                      'limit-uploader':
                        item.regImages.length == item.maxNum ||
                        verify.res == '-1',
                    }"
                    :action="uploadUrl()"
                    list-type="picture-card"
                    :limit="item.maxNum"
                    :multiple="isMultiple"
                    :before-upload="beforeAvatarUpload"
                    :on-exceed="handleExceed"
                    :file-list="item.regImages"
                    :http-request="
                      (file) => handleHttpRequest(file, item.imgType)
                    "
                  >
                    <i
                      slot="default"
                      class="el-icon-plus avatar-uploader-icon"
                    ></i>
                    <div slot="file" slot-scope="{ file }">
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url"
                        alt=""
                      />
                      <span class="el-upload-list__item-actions">
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePreview(file)"
                        >
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <span
                          class="el-upload-list__item-delete"
                          @click="handleRemove(file)"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <div class="handlePicture" ref="handle">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureRotateLeft"
                      >
                        <el-button
                          type="text"
                          icon="el-icon-refresh-left"
                          title="左旋转"
                          style="font-size: 20px"
                        ></el-button>
                      </span>
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureRotateBack"
                      >
                        <el-button
                          type="text"
                          icon="el-icon-full-screen"
                          title="原图"
                          style="font-size: 20px"
                        ></el-button>
                      </span>
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureRotateRight"
                      >
                        <el-button
                          type="text"
                          icon="el-icon-refresh-right"
                          title="右旋转"
                          style="font-size: 20px"
                        ></el-button>
                      </span>
                    </div>
                    <img :src="dialogImageUrl" alt="" ref="dialogImg" />
                  </el-dialog>
                </div>
              </div>
            </div>

            <div class="reporting-btn" v-if="verify.res != -1">
              <router-link
                v-if="!isEditInfos"
                class="el-button el-button--small"
                :to="{ path: '/basicInfo' }"
                >上一步</router-link
              >
              <el-button
                style="margin-left: 20px"
                type="primary"
                size="small"
                @click="onSubmit"
                :class="{ disabled: verify.res != 0 }"
                >{{ isEditInfos ? "确认修改" : "下一步" }}</el-button
              >
            </div>
            <div class="no-edit" v-else>
              <i class="el-icon-warning warning"></i>{{ verify.msg }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="code_mask"
      v-if="isShowExample"
      @click="isShowExample = false"
    ></div>
  </div>
</template>
<script>
import Steps from "../components/Steps";
import fetches from "../utils/request";
import localDb from "../utils/localDb";
import {
  getVerify,
  uploadImage,
  delUploadImage,
  getRegImageSet,
  getStudInfo,
  getSysCode,
} from "../utils/api";
const { defaultHost } = fetches;
export default {
  name: "signup",
  inject: ["reload"], //注入reload方法
  components: {
    Steps,
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      isMultiple: true,
      isShowExample: false, //是否显示示例图
      deg: 0,
      scale: 1,
      isEditInfos: false, //是否是修改页面
      editTitle: "", //编辑页面标题
      alertTitle: "",
      signInfo: [], //图片上传页面的基本数据
      requireImg: [], //必填项照片数组
    };
  },
  methods: {
    //图片上传地址
    uploadUrl() {
      return `${defaultHost}/api/Student/UploadImage`;
    },
    //图片格式限制
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 5;
      file.deg = 0;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG或PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 5MB!");
      }
      return isJPG && isLt2M;
    },
    //图片上传超过数量限制
    handleExceed() {
      this.$message.error("上传图片不能超过数量限制!");
    },
    //删除图片
    handleRemove(file) {
      if (this.verify.res == -1) {
        this.$message.error(this.verify.msg);
        return false;
      }
      this.$confirm("确定删除这张图片吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            const data = await delUploadImage(file.id, file.imgSource);
            if (data.res == 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
              });
              //this.reload();
              this.getSignupInfo();
            } else {
              this.$message.error(data.msg);
            }
          } catch (error) {}
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            duration: 1500,
          });
        });
    },
    //上传图片
    async handleHttpRequest(file, imgType) {
      if (this.verify.res == -1) {
        this.$message.error(this.verify.msg);
        this.getSignupInfo();
        return false;
      }
      let formData = new FormData();
      formData.append("file", file.file);
      formData.append("imgType", imgType);
      localDb.set("upload", "upload");
      try {
        const data = await uploadImage(imgType, formData);
        if (data.res == 0) {
          this.$message({
            message: "上传成功",
            type: "success",
            duration: 1500,
          });
          // this.reload();
          localDb.clear("1", "upload");
          this.getSignupInfo();
        } else {
          localDb.clear("1", "upload");
          this.$message.error(data.msg);
        }
      } catch (error) {
        localDb.clear("1", "upload");
        this.$message.error("上传失败");
      }
    },
    //预览图片
    handlePreview(file) {
      this.deg = 0;
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.dialogImg.forEach((item) => {
          item.style.transform = "rotate(" + this.deg + "deg)";
        });
        if (this.signInfo.length == 2) {
          this.$refs.handle[0].style.display = "none";
          this.$refs.dialogImg[0].style.display = "none";
          return false;
        } else if (this.signInfo.length == 4) {
          this.$refs.handle[2].style.display = "none";
          this.$refs.dialogImg[2].style.display = "none";
        } else if (this.signInfo.length == 5) {
          this.$refs.handle[2].style.display = "none";
          this.$refs.dialogImg[2].style.display = "none";
          this.$refs.handle[3].style.display = "none";
          this.$refs.dialogImg[3].style.display = "none";
        }
        this.$refs.handle[0].style.display = "none";
        this.$refs.handle[1].style.display = "none";
        this.$refs.dialogImg[0].style.display = "none";
        this.$refs.dialogImg[1].style.display = "none";
      });
    },
    //图片左旋转
    handlePictureRotateLeft() {
      this.deg += -90;
      this.$refs.dialogImg.forEach((item) => {
        item.style.transform = "rotate(" + this.deg + "deg)";
      });
    },
    // 原图
    handlePictureRotateBack() {
      this.deg = 0;
      this.$refs.dialogImg.forEach((item) => {
        item.style.transform = "rotate(" + this.deg + "deg)";
      });
    },
    //图片右旋转
    handlePictureRotateRight() {
      this.deg += 90;
      this.$refs.dialogImg.forEach((item) => {
        item.style.transform = "rotate(" + this.deg + "deg)";
      });
    },
    onSubmit() {
      for (let i = 0; i < this.requireImg.length; i++) {
        if (!this.requireImg[i].regImages.length) {
          this.$message.error("请上传" + this.requireImg[i].imgTitle);
          return false;
        }
      }
      if (this.isEditInfos) {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1500,
        });
        setTimeout(() => {
          this.$router.push({ path: "/results" });
        }, 1500);
      } else {
        this.$router.push({ path: "/selectgrade" });
      }
    },
    // 获取图片上传页面数据
    async getSignupInfo() {
      try {
        const data = await getRegImageSet();
        if (data.res == 0) {
          this.isShowExample = data.data.imgOpen == "0" ? false : true;
          this.signInfo = data.data.studRegImageSet;
          this.requireImg = [];
          this.signInfo.forEach((item) => {
            item.regImages.forEach((val) => {
              val.url = defaultHost + val.imgUrl;
            });
            if (item.isRequired == "1") {
              this.requireImg.push({
                imgTitle: item.imgTitle,
                regImages: item.regImages,
              });
            }
          });
        }
      } catch (error) {}
    },
    // 获取所有的入学类型
    async getRegType(type) {
      try {
        const data = await getSysCode(type);
        if (data.res == 0) {
          data.data.forEach((item) => {
            if (item.code == this.stuList.regType) {
              this.alertTitle = item.text;
            }
          });
        }
      } catch (error) {}
    },
    // 获取学生信息
    async getStuList() {
      try {
        const data = await getStudInfo();
        if (data.res == 0) {
          this.$store.dispatch("setStuList", data.data.person);
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {}
    },
    // 判断学生是否可修改信息、注销
    async getVerify() {
      try {
        const data = await getVerify();
        localDb.set("verify", data);
      } catch (error) {}
    },
  },
  computed: {
    stuList() {
      return this.$store.state.stuList;
    },
    verify() {
      return this.$store.state.verify;
    },
  },
  created() {
    this.getVerify();
    //判断是不是修改页面
    if (this.$route.query.isEditInfos) {
      this.isEditInfos = true;
      this.editTitle = this.$route.query.isEditInfos;
    } else {
      this.isEditInfos = false;
    }
  },
  mounted() {
    this.getRegType("regType1");
    this.getSignupInfo();
    this.getStuList();
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.no-edit {
  padding-bottom: 20px;
}
.signup_index {
  min-height: 100vh;
  // background-color: #edf4fa;
  padding-top: 30px;
  .content {
    padding-bottom: 30px;
  }
}
.reporting-main {
  padding: 20px;
  padding-bottom: 0;
  .bd {
    .notice {
      display: flex;
      align-items: center;
      margin-bottom: 25px;
      .el-button {
        border-color: #0195ff;
        color: #0195ff;
        &:hover {
          background-color: #0195ff;
          color: #fff;
        }
        &:active {
          background-color: #0195ff;
          color: #fff;
        }
      }
      p {
        margin-left: 12px;
        color: #222222;
        span {
          color: #f81d22;
          font-weight: 700;
        }
      }
    }
  }
  .upload-list {
    .list-hd {
      position: relative;
      &::before {
        content: "";
        width: 3px;
        height: 17px;
        background-color: #0195ff;
        position: absolute;
        top: 5px;
        left: 0;
      }
      .title {
        font-size: 16px;
        padding-left: 8px;
        // font-family: "MicrosoftYaHei-bold";
        i {
          color: #ff0000;
          font-weight: normal;
        }
        span {
          color: #666;
          font-size: 14px;
          font-weight: 400;
          &.left {
            margin-left: 10px;
          }
        }
      }
    }
    .list-bd {
      padding: 4px 0 10px;
    }
  }
  .reporting-btn {
    padding: 10px 0 30px;
    text-align: center;
    .el-button {
      border-color: #0195ff;
      color: #0195ff;
      &:last-child {
        background-color: #0195ff;
        color: #fff;
      }
    }
    .warning {
      margin-top: 10px;
      font-size: 16px;
      .el-icon-warning {
        margin: -3px 12px 0 0;
        color: $bsC;
        font-size: 30px;
        vertical-align: middle;
      }
    }
  }
}
.notice {
  position: relative;
  .example-wrap {
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    border-radius: 4px;
    background-color: #fff;
    box-sizing: border-box;
    text-align: center;
    z-index: 999;
    .example-content {
      ul {
        display: flex;
        flex-wrap: nowrap;
        // justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        li {
          width: 260px;
          margin: 0 10px;
          .content-img {
            padding-top: 28px;
            font-size: 0;
            margin-bottom: 20px;
            span {
              font-size: 16px;
              // line-height: 53px;
              color: #000;
            }
            .el-image {
              margin-top: 18px;
              width: 260px;
              height: 170px;
            }
          }
          .icon_dx {
            width: 60px;
            height: 56px;
          }
        }
      }
      .know {
        margin: 30px 20px;
        width: 30%;
        // height: 90px;
        font-size: 16px;
        color: #fff;
        width: 350px;
        height: 42px;
      }
    }
    &::before {
      content: "";
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
      border-bottom: 16px solid #fff;
      position: absolute;
      left: 31px;
      top: -10px;
    }
  }
}
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translate(-500px, -120px) scale(0.1, 0.3);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.6s ease;
}
</style>
<style lang="scss">
.uploadImgBox {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    background: #fafafa;
    cursor: pointer;
    position: relative;
    width: 265px;
    height: 210px;
    margin: 0 10px 10px;
    line-height: 210px;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: $bsC;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 265px;
    height: 210px;
    line-height: 210px;
    text-align: center;
  }
  .el-upload-list--picture-card .el-upload-list__item {
    width: 265px;
    height: 210px;
    margin: 0 10px 10px;
    border: none;
    border-radius: 10px;
  }
  .el-upload-list__item {
    transition: none !important;
    > div {
      height: 100%;
      text-align: center;
      background: #000;
      img {
        /*width:auto;*/
        vertical-align: top;
        object-fit: cover;
      }
    }
  }
  .el-upload-list__item.is-success .el-upload-list__item-status-label {
    display: none;
  }
  .el-upload-list__item.is-success:focus:not(:hover) .el-icon-close-tip {
    display: none;
  }
  .limit-uploader .el-upload--picture-card {
    display: none;
  }
  .el-form--inline {
    .reporting-btn {
      .el-form-item__content {
        width: 100%;
        text-align: center;
      }
    }
  }
  .el-dialog__wrapper {
    text-align: center;
    .el-dialog {
      display: inline-block;
      width: 100%;
      height: 100%;
      box-shadow: none;
      background: none;
      margin-top: 0 !important;
      // margin-top: 30vh !important;
    }
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__body {
      padding: 0;
      width: 100%;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      > img {
        max-height: 100%;
        max-width: 100%;
      }
    }
    .handlePicture {
      position: absolute;
      left: 50%;
      // bottom: -380px;
      bottom: 30px;
      // position: fixed;
      // bottom: 10%;
      // left: 50%;
      z-index: 22;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      width: 282px;
      height: 44px;
      line-height: 44px;
      padding: 0 23px;
      background-color: #606266;
      border-color: #fff;
      border-radius: 22px;
      text-align: center;
      opacity: 0.8;
      .el-button {
        padding: 8px 20px;
        color: #fff;
      }
    }
    .el-dialog__headerbtn {
      z-index: 22;
      right: 100px;
    }
    .el-dialog__headerbtn .el-dialog__close {
      right: 40px;
      color: #fff;
      font-size: 22px;
      padding: 8px;
      border: 1px #fff solid;
      border-radius: 100%;
    }
  }
}
.code_mask {
  width: 100%;
  height: 100%;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0.5;
}
</style>
